<template>
  <div class="categories">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/categories' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加分类 -->
    <el-button type="primary" plain @click="handleAddCat">添加分类</el-button>
    <!-- 表格 -->
    <tree-grid
      class="mt-15"
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory"
    >
    </tree-grid>
    <!-- 分页器 -->
     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum">
      </el-pagination>
      <!-- 添加分类对话框 -->
      <el-dialog title="收货地址" :visible.sync="addDialogFormVisible">
        <el-form :model="addForm" :rules="rules" ref="addForm">
          <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cat_name">
            <el-input v-model="addForm.cat_name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="父级名称" :label-width="formLabelWidth">
            <!-- 级联选择器 -->
            <el-cascader
              :options="options"
              v-model="selectedOptions"
              :props="defaultProps"
              change-on-select
              @change="handleChange">
            </el-cascader>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAddCat('addForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑分类对话框 -->
      <el-dialog title="编辑分类" :visible.sync="editDialogFormVisible">
        <el-form :model="editForm" :rules="rules" ref="editForm">
          <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cat_name">
            <el-input v-model="editForm.cat_name" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditCat('editForm')">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid.vue'
import { getGoodsCategories, postGoodsCategories, getCatById, putEditCatsubmit } from '@/api'
export default {
  components: {
    TreeGrid
  },
  data () {
    return {
      dataSource: [],
      columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: ''
      }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: ''
      }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: ''
      }],
      pagenum: 1,
      pagesize: 5,
      totalNum: 0,
      addForm: { cat_pid: '', cat_name: '', cat_level: '' },
      editForm: { cat_pid: '', cat_name: '', cat_level: '' },
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      formLabelWidth: '100px',
      rules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },
      options: [],
      selectedOptions: [],
      defaultProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }
    }
  },
  created () {
    this.initTable()
  },
  methods: {
    // 删除函数
    deleteCategory (cid) {
      console.log(cid)
    },
    // 编辑函数
    editCategory (cid) {
      console.log(cid)
      this.editForm.cat_pid = cid
      getCatById(cid).then(res => {
        if (res.meta.status === 200) {
          this.editDialogFormVisible = true
          this.editForm.cat_name = res.data.cat_name
        }
        console.log(res)
      })
    },
    // 初始化表格
    initTable () {
      getGoodsCategories(3, this.pagenum, this.pagesize).then(res => {
        // console.log(res)
        this.dataSource = res.data.result
        this.totalNum = res.data.total
      })
    },
    // 分页器函数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.initTable()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
      this.initTable()
    },
    // 级联选择器触函数
    handleChange (value) {
      console.log(value)
      this.addForm.cat_pid = value[value.length - 1]
      this.addForm.cat_level = value.length
    },
    // 添加分类
    handleAddCat () {
      getGoodsCategories(2).then(res => {
        console.log(res)
        this.addDialogFormVisible = true
        this.options = res.data
      })
    },
    // 添加分类提交
    submitAddCat (formName) {
      this.$refs[formName].validate(isPass => {
        if (isPass) {
          postGoodsCategories(this.addForm).then(res => {
            // console.log(res)
            if (res.meta.status === 201) {
              this.$message.success('添加分类成功')
              this.addDialogFormVisible = false
              this.initTable()
            }
          })
        }
      })
    },
    // 编辑分类提交
    submitEditCat () {
      putEditCatsubmit(this.editForm.cat_pid, this.editForm.cat_name).then(res => {
        // console.log(res)
        if (res.meta.status === 200) {
          this.$message.success('更新成功')
          this.editDialogFormVisible = false
          this.initTable()
        }
      })
    }
  }
}
</script>
